<template>
    <div class="resume-box pd20">
        <div class="resume pd30">
            <div class="head-title weight ml20 mb20">{{form.name||""}}</div>
            <div class="base-data mini-gray-bg pd20 mb30">
                <span class="inline-b w30">性别：{{proxy.$utils.findObj(form.sex,globalData.sexAry,'value').text}}</span><span class="inline-b w30">出生年月：{{form.birthday}}</span><br/>
                <span class="inline-b w30">电话：{{form.mobile}}</span><span class="inline-b w30">名族：{{proxy.$utils.findObj(form.nation,globalData.nationList,'value').text}}</span><br/>
                <div class="head-box">
                    <el-image class="head" @click="editData(v)" fit="cover" :src="form.head?proxy.$setting.globalUrl.fileurl+'/head/'+form.head:''">
                        <template #error>
                            <div class="image-slot">
                                <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"/>
                            </div>
                        </template>
                    </el-image>
                </div>
            </div>
            <div class="" style="margin-top:60px;">
                <div class="label base-color large-size weight ml20 mb10">个人优势</div>
                <div class="line-w"></div>
                <div>
                    <div class="base-data pd20-row pd10-column mb30 base-gray-color">
                        <span class="inline-b w100" style="text-align: justify;">{{form.specialty}}</span>
                    </div>
                </div>
            </div>
            <div class="mt30">
                <div class="label base-color large-size weight ml20 mb10">求职意向</div>
                <div class="line-w"></div>
                <div>
                    <div class="base-data pd20-row pd10-column mb30 base-gray-color" v-for="(v,i) in form.objective" :key="i">
                        <span class="inline-b w50">期望职位：{{v.job}}</span><span class="inline-b w50">薪资要求：{{v.salary*10}}K</span><br/>
                        <span class="inline-b w50">求职类型：{{v.type?'兼职':'全职'}}</span><span class="inline-b w50">期望行业：{{proxy.$utils.findObj(v.industry,globalData.industryList,'value').text}}</span>
                    </div>
                </div>
            </div>
            <div class="mt30">
                <div class="label base-color large-size weight ml20 mb10">教育经历</div>
                <div class="line-w"></div>
                <div>
                    <div class="base-data pd20-row pd10-column mb30 base-gray-color" v-for="(v,i) in form.edus" :key="i">
                        <span class="inline-f ju-flex-start w50 base-color mb10">{{v.start}} ～ {{v.end}}</span><span class="inline-f ju-flex-end w50 base-color text-align-end">{{v.school}}</span><br/>
                        <span class="inline-b w100 mb10">{{v.major}} | {{proxy.$utils.findObj(v.edu,globalData.eduList,'value').text}}</span><br/>
                            <span class="inline-b w100">{{v.experience}}</span>
                    </div>
                </div>
            </div>
            <div class="mt30">
                <div class="label base-color large-size weight ml20 mb10">工作经历</div>
                <div class="line-w"></div>
                <div>
                    <div class="base-data pd20-row pd10-column mb30 base-gray-color" v-for="(v,i) in form.works" :key="i">
                        <span class="inline-f ju-flex-start w50 base-color mb10">{{v.start}} ～ {{v.end}}</span><span class="inline-f ju-flex-end w50 base-color text-align-end">{{v.companyname}}</span><br/>
                        <span class="inline-f ju-flex-start w50 mb10">{{v.jobname}} | {{proxy.$utils.findObj(v.industry,globalData.industryList,'value').text}}</span><br/>
                        <span class="inline-b w100 mb10">工作内容：{{v.jobdetail}}</span>
                        <span class="inline-b w100">业绩：{{v.achievement}}</span>
                    </div>
                </div>
            </div>
            <div class="mt30">
                <div class="label base-color large-size weight ml20 mb10">项目经历</div>
                <div class="line-w"></div>
                <div>
                    <div class="base-data pd20-row pd10-column mb30 base-gray-color" v-for="(v,i) in form.projects" :key="i">
                        <span class="inline-f ju-flex-start w50 base-color mb10">{{v.start}} ～ {{v.end}}</span><span class="inline-f ju-flex-end w50 base-color text-align-end">{{v.name}}</span><br/>
                        <span class="inline-f ju-flex-start w50 mb10">{{v.role}}</span><br/>
                        <span class="inline-b w100 mb10">项目描述：{{v.msg}}</span>
                        <span class="inline-b w100">项目业绩：{{v.achievement}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, toRefs, getCurrentInstance, watch, reactive } from 'vue'
let { proxy } = getCurrentInstance()

const props = defineProps({
    value: { type: Object, default: {}}
})
let obj = reactive({
    form: props.value
})
let { form } = toRefs(obj)
</script>

<style lang="scss" scoped>
    .resume-box{
        background: #f0f0f0;
        .resume{
            background: #fff;
        }
        .head-title{font-size: 36px;}
        .base-data{
            position: relative;
        }
        .head-box{
            position: absolute;right: 50px;top: 50%;margin-top: -100px;width: 150px;height: 200px;background: #fff;box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.03);
            .head{width: 150px;height: 200px;}
        }
        .label{
            font-size: 20px;
        }
    }
</style>